<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>限时秒杀案例</title>
    <style>
        body {
            background-image: url(../img/flash_sale.png); /* 请替换为你的背景图片URL */
            background-size: cover;
            background-position: center;
            color: white;
            text-align: center;
            font-family: Arial, sans-serif;
        }

        .countdown {
            margin-top: 20%;
        }

        #countdown-timer {
            font-size: 2em;
        }
    </style>
</head>
<body>
    <div class="countdown">
        <h1>限时秒杀</h1>
        <p>距离本场抢购结束还剩：</p>
        <div id="countdown-timer">
            <span id="hours">00</span> 时 
            <span id="minutes">00</span> 分 
            <span id="seconds">00</span> 秒
        </div>
    </div>
    <script>
        // 设置秒杀结束时间
        const endTime = new Date("November 11, 2019 11:11:11").getTime();

        // 更新倒计时函数
        function updateCountdown() {
            const now = new Date().getTime();
            const timeLeft = endTime - now;

            // 计算小时、分钟和秒
            const hours = Math.floor(timeLeft / (1000 * 60 * 60));
            const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

            // 显示结果
            document.getElementById("hours").innerText = String(hours).padStart(2, '0');
            document.getElementById("minutes").innerText = String(minutes).padStart(2, '0');
            document.getElementById("seconds").innerText = String(seconds).padStart(2, '0');

            // 如果时间结束，显示提示信息
            if (timeLeft < 0) {
                clearInterval(interval);
                document.getElementById("countdown-timer").innerText = "秒杀已结束";
            }
        }

        // 每秒更新一次倒计时
        const interval = setInterval(updateCountdown, 1000);

        // 初始化倒计时
        updateCountdown();
    </script>
</body>
</html>